<template>
    <el-dialog
        title="临时授权"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="850px"
        top="10px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form
                ref="form"
                :rules="rules"
                size="small"
                class="authorizationDialog"
                label-position="top"
                :model="form"
            >
                <el-form-item>
                    <el-tree
                        :data="responseList"
                        show-checkbox
                        :props="defaultProps"
                        node-key="code"
                        ref="tree"
                        :default-checked-keys="checkCode"
                        :expand-on-click-node="false"
                    >
                        <span
                            class="custom-tree-node"
                            slot-scope="{ node, data }"
                        >
                            <span>{{ node.label }}</span>
                            <span v-show="data.node === 0">
                                <el-date-picker
                                    v-model="data.expiredTime"
                                    type="date"
                                    style="width: 180px"
                                    size="small"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    :picker-options="pickerOptions"
                                    placeholder="选择日期时间"
                                >
                                </el-date-picker>
                                <el-input
                                    size="small"
                                    class="items"
                                    placeholder="请输入备注"
                                    v-model="data.remark"
                                ></el-input>
                            </span>
                        </span>
                    </el-tree>
                    <div
                        style="margin-left: 24px"
                        v-for="(item,index) in timeResponseList"
                        :key="index"
                    >
                        <div class="itemWrap">
                            <el-checkbox v-model="item.selected"
                                >{{item.name}}</el-checkbox
                            >
                            <div>
                                <el-date-picker
                                    type="date"
                                    v-model="item.expiredTime"
                                    style="width: 180px"
                                    size="small"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions"
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期时间"
                                >
                                </el-date-picker>
                                <el-input
                                    size="small"
                                    class="items"
                                    v-model="item.remark"
                                    placeholder="请输入备注"
                                ></el-input>
                            </div>
                        </div>
                        <div v-if="item.selected" style="margin-left: 24px">
                            <div
                                v-for="(todo, i) in item.vipServiceInfoVos"
                                :key="i"
                            >
                                <el-radio
                                    v-model="radioCode"
                                    :label="todo.code"
                                    >{{ todo.name }}</el-radio
                                >
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    data () {
        return {
            defaultProps: {
                children: 'vipServiceInfoVos',
                label: 'name',
                id: 'code'
            },
            isRadio: false,
            checkCode: [],
            radioCode: '',
            responseList: [],
            timeResponseList: [
                {
                    code: 'YJYSJKCSC-100',
                    name: '数据可查时长服务',
                    expiredTime: null,
                    remark: null,
                    selected: 0,
                    node: 0,
                    vipServiceInfoVos: [
                        {
                            code: 'YJYSJKCSC-100',
                            name: '数据可查时长100天',
                            expiredTime: null,
                            remark: null,
                            selected: 0,
                            node: 0,
                            vipServiceInfoVos: null
                        },
                        {
                            code: 'YJYSJKCSC-111',
                            name: '数据可查时长1010天',
                            expiredTime: null,
                            remark: null,
                            selected: 0,
                            node: 0,
                            vipServiceInfoVos: null
                        }
                    ]
                }
            ],
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() + 60 * 60 * 1000 * 24 < Date.now()
                }
            },
            serverIp: '',
            form: {
                day: '',
                checkArr: []
            },
            copyCheckArr: [],
            dataList: [
            ],
            loading: false,
            showValue: false,
            rules: {
                // day: [
                //     { required: true, message: '不能为空', trigger: 'blur' }
                // ],
                // checkArr: [
                //     { required: true, message: '请选择', trigger: 'blur' }
                // ]
            }
        }
    },
    watch: {
        value (val) {
            this.showValue = val
            if (val) {
                this.getCheckList()
            }
        },
        showValue (val) {
            this.$emit('update:value', val)
        }
    },
    created () {
    },
    methods: {
        async getCheckList () {
            this.checkCode = []
            this.radioCode = ''
            let res = await this.$http.post(this.$store.state.serverIp + '/server/serverInfo/temporaryAddServerList', {
                companyCode: this.currRow.companyCode,
                managementType: this.currRow.managementType
            })
            let response = res.data
            if (response.ret === '0') {
                console.log(res)
                this.responseList = response.res.responseList
                // this.timeResponseList = response.res.timeResponseList
                this.checkCode = response.res.selectedAddServiceCodes
                this.timeResponseList.forEach(item => {
                    if (item.selected === 1) {
                        this.radioCode = item.code
                    }
                })
                if (this.radioCode) {
                    this.isRadio = true
                }
            }
        },
        // 清空数据
        clearData () {
            this.isRadio = false
            this.radioCode = ''
            this.copyCheckArr = []
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        save () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let checkList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
                    if (this.isRadio) {
                        this.timeResponseList.forEach(item => {
                            if (item.code === this.radioCode) {
                                checkList.push(item)
                            }
                        })
                    }
                    console.log(checkList)
                    let isNull = 0
                    checkList.forEach(item => {
                        if (item.expiredTime || item.node === 1) {
                            isNull++
                        }
                    })
                    if (isNull !== checkList.length) {
                        return this.$message.warning('时间不能为空')
                    }
                    let res = await this.$http.post(this.$store.state.serverIp + '/server/serverInfo/temporaryAddServer', {
                        addServerTemporarySaveVos: checkList,
                        companyCode: this.currRow.companyCode,
                        managementType: this.currRow.managementType
                    })
                    let response = res.data
                    if (response.ret === '0') {
                        this.$message({
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        })
                        this.$emit('getList')
                        this.clearData()
                    }
                }
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.items
    width: 200px

.center
    text-align: center

.custom-tree-node
    display: flex
    justify-content: space-between
    width: 100%

.wrap
    height: 550px
    overflow: auto

.itemWrap
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 5px

.checkItem1
    display: flex
    align-items: center
    margin-left: 0 !important
    width: 100%
    margin-bottom: 5px
</style>